<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

  </style>
</head>

<body>

  <div id="app">
    <v-app>



      <!-- 顶部导航 -->
      <v-app-bar app fixed hide-on-scroll  flat>
        <v-sheet height="30" width="100%" class="d-flex align-center ml-4 grey lighten-3" style="border-radius: 30px;">
          <v-icon>mdi-magnify</v-icon>
          <v-carousel vertical :show-arrows='false' hide-delimiters cycle height="20">
            <v-carousel-item class="caption grey--text" v-for='item in list1' :key="item.id">{{item.name}}
            </v-carousel-item>
          </v-carousel>
          <v-icon class="mr-4">mdi-credit-card-scan-outline</v-icon>
        </v-sheet>

        <template v-slot:extension>
          <v-tabs center-active show-arrows>
            <v-tab v-for='(item,index) in list' @click='xianshi(index)' :key="item.id">
              <div v-if='curr == index' style="font-size: x-large;" class="font-weight-black black--text">{{item.name}}</div>
              <div v-else>{{item.name}}</div>
            </v-tab>
          </v-tabs>
          <v-app-bar-nav-icon style="right: 0;position: absolute;" class="mr-1"></v-app-bar-nav-icon>
        </template>
      </v-app-bar>

      <!-- 内容 -->
      <v-content >
        <div v-for='item in list2' :key="item.id" class="d-flex justify-space-between mb-2">
          <v-card width="48vw" class="mb-1 ">

            <v-img :src='item.path' width="48vw" height="120" gradient="to top right, rgba(0,0,0,0.5),rgba(0,0,0,0.5)"
              class="white--text caption">

              <div style="bottom: 0;left: 0;position: absolute;" class="ml-2 ">{{item.name2}}</div>
              <div class="mr-2 d-flex " style="bottom: 0;right: 0;position: absolute;">
                <v-icon dark size="small">mdi-account</v-icon>
                <div>{{item.name3}}</div>
              </div>
            </v-img>
            <v-card-title class="d-inline-block text-truncate body-2 black--text pa-0 mt-1 ml-1 ">{{item.name}}
            </v-card-title>
            <v-card-actions class="caption grey--text">{{item.name1}}</v-card-actions>
          </v-card>

          <v-card width="48vw" class="mb-1 ">

            <v-img :src='item.path1' width="48vw" height="120"  
              class="white--text caption">
              <div style="bottom: 0;position: absolute;" class="ml-2 ">{{item.name6}}</div>
              <div class="mr-2 d-flex " style="bottom: 0;right: 0;position: absolute;">
                <v-icon dark size="small">mdi-account</v-icon>
                <div>{{item.name7}}</div>
              </div>
            </v-img>
            <v-card-title class="text-truncate body-2 black--text pa-0 mt-1 ml-1 ">{{item.name4}}
            </v-card-title>
            <v-card-actions class="caption grey--text">{{item.name5}}</v-card-actions>
          </v-card>
        </div>

        <!-- 选项组 -->
        <div class="d-flex justify-space-between align-center flex-wrap mb-2">
          <div class="d-flex flex-column align-center mt-2" v-for='item in list3' style="width: 20%;">
            <v-avatar size="40" class="ma-2"><img :src="item.path" alt=""></v-avatar>
            <div class="caption">{{item.name}}</div>
          </div>
        </div>

        <!-- 轮播 -->
        <v-carousel class="mt-2" height="130" hide-delimiters :show-arrows='false' cycle>
          <v-carousel-item v-for='item in list4' :key="item.id" class="ma-3">
            <div class="d-flex justify-space-between align-center">
              <div class="d-flex align-center ">
                <div max-height="60" max-width="60">
                  <v-img :src='item.path' width="60" height="60" style="border-radius: 10px;"></v-img>
                </div>
                <div class="d-flex flex-column">
                  <div class="font-weight-black ">{{item.name}}</div>
                  <div class="caption">{{item.name1}}</div>
                </div>
              </div>
              <div height="20" style="border-radius: 30px; width: 50px;text-align: center;"
                class="orange white--text caption">订阅</div>
            </div>

          </v-carousel-item>
        </v-carousel>
      </v-content>


      <!-- 底部导航 -->
      <v-bottom-navigation class="justify-space-between" fixed>
        <div v-for='(item,index) in list5' style="text-align: center; width: 24%;" @click='handle(index)'
          :key="item.id">
          <v-icon v-if='cub == index' class="orange" style="border-radius: 30px;">{{item.name}}</v-icon>
          <v-icon v-else>{{item.name}}</v-icon>
          <div class="caption">{{item.name1}}</div>
        </div>
      </v-bottom-navigation>
    </v-app>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          curr: 0,
          cub: 0,
          list5: [{
              name: 'mdi-calendar-heart',
              name1: '首页',
            },
            {
              name: 'mdi-star-face',
              name1: '娱乐',
            },
            {
              name: 'mdi-heart-outline',
              name1: '订阅',
            },
            {
              name: 'mdi-file-find-outline',
              name1: '发现',
            },
            {
              name: 'mdi-face-outline',
              name1: '我的',
            },
          ],
          list4: [{
              path: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1808408178,3702750152&fm=11&gp=0.jpg',
              name: '绝地求生： PCL春季赛',
              name1: '今天 18：00开始 2212人预订',
            },
            {
              path: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3624301897,4147781670&fm=26&gp=0.jpg',
              name: 'DOTA2: CDA联赛',
              name1: '今天 18：00开始 2212人预订',
            },
            {
              path: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3936581386,3821548352&fm=26&gp=0.jpg',
              name: '绝地求生： PDL春季赛',
              name1: '今天 18：00开始 2212人预订',
            },
            {
              path: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1134329344,114624405&fm=26&gp=0.jpg',
              name: '王者荣耀： KPL联赛',
              name1: '今天 18：00开始 2212人预订',
            },
            {
              path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2306191037,768801870&fm=11&gp=0.jpg',
              name: '虎牙HSL超级联赛',
              name1: '今天 18：00开始 2212人预订',
            },

          ],
          list3: [{
              path: 'http://img3.imgtn.bdimg.com/it/u=3155158046,2727054473&fm=15&gp=0.jpg',
              name: '和平精英',
            },
            {
              path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1021366834,3533332481&fm=26&gp=0.jpg',
              name: '猫和老鼠',
            },
            {
              path: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1099040821,999137199&fm=26&gp=0.jpg',
              name: '王者荣耀',
            },
            {
              path: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3773039838,2371566862&fm=26&gp=0.jpg',
              name: 'CF手游',
            },
            {
              path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2306191037,768801870&fm=11&gp=0.jpg',
              name: '迷你世界',
            },
            {
              path: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2054958960,2074474520&fm=26&gp=0.jpg',
              name: '三国杀',
            },
            {
              path: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3732602607,2879349225&fm=15&gp=0.jpg',
              name: '颜值',
            },
            {
              path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3067818181,3083688134&fm=26&gp=0.jpg',
              name: '火影忍者',
            },
            {
              path: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1713475706,1292692787&fm=26&gp=0.jpg',
              name: '创造与魔法',
            },
            {
              path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1710046785,60091676&fm=26&gp=0.jpg',
              name: '本周新游',
            },
          ],
          list2: [{
              id: 1,
              path: 'http://08.imgmini.eastday.com/mobile/20180814/20180814232323_d106c497f1b287b802983aaf3ffa14e4_5.gif',
              path1: 'http://08.imgmini.eastday.com/mobile/20180814/20180814232323_d106c497f1b287b802983aaf3ffa14e4_5.gif',
              name: '直播 RW vs JDG LPL',
              name1: '英雄联盟',
              name2: '英雄联盟赛事',
              name3: '111.1万',
              name4: '我说了今天韩服直接800，真的是',
              name5: '英雄联盟',
              name6: '聆听、芒果鱼',
              name7: '121.1万',
            },
            {
              path: 'http://img2.imgtn.bdimg.com/it/u=2284225224,715484000&fm=26&gp=0.jpg',
              path1: 'http://img2.imgtn.bdimg.com/it/u=2284225224,715484000&fm=26&gp=0.jpg',
              name: 'PDL春季赛',
              name1: '绝地求生',
              name2: 'PDL发展联盟',
              name3: '111.1万',
              name4: '搞笑路排，寻找卧龙',
              name5: '绝地求生',
              name6: '星魂',
              name7: '49.1万',
            },
            {
              path: 'http://img5.imgtn.bdimg.com/it/u=3104782390,412364191&fm=26&gp=0.jpg',
              path1: 'http://img2.imgtn.bdimg.com/it/u=2284225224,715484000&fm=26&gp=0.jpg',
              name: '超跑车队约妹子',
              name1: '户外',
              name2: '正恒-局长',
              name3: '111.1万',
              name4: 'LDL主舞台',
              name5: '英雄联盟',
              name6: 'LDL主舞台',
              name7: '10.1万',
            },

          ],
          list1: [{
              name: '张大仙 | iG | 不求人'
            },
            {
              name: '鲨鱼哟 | 难言 |奇怪君'
            },
            {
              name: 'LOL | 王者荣耀 | 绝地求生'
            },

          ],
          list: [{
              id: 1,
              name: '全部'
            },
            {
              id: 2,
              name: '推荐'
            },
            {
              id: 3,
              name: 'LOL'
            },
            {
              id: 4,
              name: '王者荣耀'
            },
            {
              id: 5,
              name: '星秀'
            },
            {
              id: 6,
              name: '一起看'
            },
          ],
        }
      },
      methods: {
        xianshi(index) {
          this.curr = index
        },
        handle(index) {
          this.cub = index
        },
      },

      vuetify: new Vuetify(),
    })
  </script>
</body>

</html>